<template>
  <view class="my">
    <view class="user_base">
      <view class="left">
        <image :src="userInfo.avatar || '../../static/icon/banner.png'" />
        <text>{{ userInfo.nickName || '微信用户' }}</text>
      </view>
      <view class="right" @click="goUserInfo">
        <text>完善信息</text>
        <image src="../../static/icon/right.png" mode=""></image>
      </view>
    </view>
    <view class="links">
      <u-cell-group>
        <u-cell url="/pkg-house/house/house" :border="false" isLink title="我的房屋"><image class="left-icon" slot="icon" src="../../static/icon/myhouse.png" /></u-cell>
        <u-cell :border="false" isLink title="我的报修"><image class="left-icon" slot="icon" src="../../static/icon/myrepair.png" /></u-cell>
        <u-cell :border="false" isLink title="访客记录"><image class="left-icon" slot="icon" src="../../static/icon/myfriends.png" /></u-cell>
      </u-cell-group>
    </view>
    <u-button type="primary" text="退出账号" @click="logout"></u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    }
  },
  methods: {
    logout() {
      uni.showModal({
        title: '享+生活',
        content: '确定退出账号',
        confirmText: '退出',
        success: res => {
          if (res.confirm) {
            this.$store.commit('user/setUserToken', null);
            uni.removeStorageSync('userToken');
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    },
    goUserInfo() {
      uni.navigateTo({
        url: '/pages/userInfo/userInfo'
      });
    }
  },
  onLoad() {
    this.$store.dispatch('user/loadUserInfo');
  }
};
</script>

<style lang="scss" scoped>
.my {
  height: 100%;
  background-color: #fafafa;

  .user_base {
    width: 750rpx;
    height: 482rpx;
    padding: 128rpx 40rpx 0px 40rpx;
    border-radius: 0px 0px 60px 60px;
    background: #6394c0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .left {
      height: 80rpx;
      display: flex;
      align-items: center;

      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      text {
        color: #fff;
        font-size: 40rpx;
        margin-left: 20rpx;
      }
    }

    .right {
      height: 80rpx;
      display: flex;
      align-items: center;

      text {
        color: #fff;
        font-size: 28rpx;
        margin-right: 10rpx;
      }

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .links {
    width: 670rpx;
    height: 306rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 0 auto;
    margin-top: -136rpx;

    ::v-deep .u-cell__body {
      padding: 0 25rpx;
      height: 102rpx;

      .u-cell__title-text {
        color: #3c3e42 !important;
        font-size: 28rpx !important;
      }
    }

    .left-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 25rpx;
    }
  }
  ::v-deep .u-button {
    width: 670rpx;
    margin: 25rpx auto;
    background-color: #6394c0;
    border: none;
  }
}
</style>
